<template>
	<view class="news">
		<view class="notice">
			提示：此模板仅供参考，部分楼盘存在差异，最终以该楼盘的要求为准，如果存在疑问可以联系该楼盘的置业顾问询问详情。
		</view>
		<view class="list">
			<view class="row" v-for="(item,index) in downloadList" :key="index">
				<view class="img">
					<image mode="scaleToFill" :src="imgRoot+item.thumb" :data-src="imgRoot+item.thumb" @tap="preImage"></image>
					 <text class="cuIcon-same bg-blue text-white padding-sm" style="position: absolute;right:0px;bottom:0px;padding:3px;opacity: 0.7;"></text>
				</view>
				<view class="info">
					<view class="name">{{ item.advname }}</view>
					<view class="flex flex-row">
						<view style="flex:1">
							<view class="info">(仅供参考)</view>
							<view class="info">点击预览大图</view>
						</view>
						<view class="button">
							<button class="cu-btn round bg-blue"  :data-src="imgRoot+item.thumb" @tap="downLoad">下载图片</button>
						</view>
					</view>
				
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				imgRoot:this.$rootUrl,
				
				isLoading: false,
				showLeft: false,
				loadMoreText: '加载中...',
				loadMoreDefalutText: '努力加载中...',
				loadMoreNoLeftText: '没有更多了,请掉头行驶...',
				connectionFailText: '连接失败,请检查网络是否断开!',
				emptyText: '什么都没找到哟...',
				themeColor: '#D1372C',
				titleColor: '#666666',
				filterResult: '',
				downloadList: [],
			}
		},
		onLoad() {
			var me = this;
			me.loadDownLoadList();
		},
		onShow(){
			
		},
		onShareAppMessage(){
			
		},
		
		
		methods: {
			
			loadDownLoadList() {
				var me=this;
				uni.request({
					url: me.$rootUrl + '/Adv/GetList',
					data: {
						Type:"模板",
						PageSize:100
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							me.downloadList=res.data.items;
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						me.loadMoreText = me.connectionFailText;
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});

			},
			preImage(e){
					 // 预览图片
					 debugger;
					uni.previewImage({
						urls: [e.currentTarget.dataset.src],
						current:0,
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
				},
				downLoad(e){
					uni.downloadFile({
					    url: e.currentTarget.dataset.src, 
					    success: (res) => {
					        if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
								           filePath: res.tempFilePath,
								           success: function () {
											   console.log('下载成功');
								           }
								       });
					            
					        }
							
					    }
					});
					
				}
			
		}
	}
</script>


<style lang="scss">
	.news {
			width: 98%;
			margin: 0 1%;
	
			.notice {
				padding:22upx 10upx;
				font-size: 22upx;
				color: #999999;
			}
	
			.list {
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
	
				.row {
					width: 100%;
					display: flex;
					flex-direction: row;
					border-bottom: solid 1rpx #ebebeb;
	
					.img {
						width: 100%;
						align-items: center;
						justify-content: center;
						margin-bottom: 5upx;
						width: 30vw;
						position:relative;
						image {
							width: 30vw;
							height: 30vw;
						}
	
					}
	
					.info {
						display: flex;
						flex-direction: column;
						padding: 10px;
						flex: 1;

						.name {
							flex: 1;
							font-size: 30upx;
						}
	
						.info {
							flex: 1;
							font-size: 20upx;
							color: #999999;
						}
	
					}
					.button{
					
					}
	
	
	
				}
			}
		}
	
</style>
